import { getAssetsImages } from '@/utils'
import { defineComponent, ref } from 'vue'
import styles from './publicWelfare.module.less'

export default defineComponent({
  setup() {
    const imgList = ref([
      {
        url: getAssetsImages('gong1.webp'),
        name: '北京密云二中'
      },
      {
        url: getAssetsImages('gong2.webp'),
        name: '河南安阳'
      },
      {
        url: getAssetsImages('gong3.webp'),
        name: '河南信阳'
      }
    ])
    const leftEvent = () => {
      const firstItem = imgList.value[0]
      imgList.value.shift()
      imgList.value.push(firstItem)
    }
    const rightEvent = () => {
      const lastItem = imgList.value[imgList.value.length - 1]
      imgList.value.pop()
      imgList.value.unshift(lastItem)
    }
    return () => (
      <div class={styles['public-layout']}>
        <div class={styles['public-container']}>
          <p class={styles['header-text']} data-aos="fade-up">
            公益讲座
          </p>
          <div class={styles['footer-box']}>
            <div class={styles['footer-content']}>
              <div class={styles['left-box']} onClick={leftEvent}></div>
              <ul class={styles['avatar-list']}>
                {imgList.value.map(item => {
                  return (
                    <li class={styles['avatar-item']}>
                      <img src={item.url} class={styles['avatar-img']} />
                      <span class={styles['img-text']}>{item.name}</span>
                    </li>
                  )
                })}
              </ul>
              <div class={styles['right-box']} onClick={rightEvent}></div>
            </div>
          </div>
        </div>
      </div>
    )
  }
})
